<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		/*
			 * 设置outer的样式
			 */
		#outer {
			/*设置宽和高*/
			width: 520px;
			height: 333px;
			/*居中*/
			margin: 50px auto;
			/*设置背景颜色*/
			background-color: greenyellow;
			/*设置padding*/
			padding: 10px 0;
			/*开启相对定位*/
			position: relative;
			/*裁剪溢出的内容*/
			overflow: hidden;
		}

		/*设置imgList*/
		#imgList {
			/*去除项目符号*/
			list-style: none;
			/*设置ul的宽度*/
			/*width: 2600px;*/
			/*开启绝对定位*/
			position: absolute;
			/*设置偏移量*/
			/*
				 * 每向左移动520px，就会显示到下一张图片
				 */
			left: 0px;
		}

		/*设置图片中的li*/
		#imgList li {
			/*设置浮动*/
			float: left;
			/*设置左右外边距*/
			margin: 0 10px;
		}

		/*设置导航按钮*/
		#navDiv {
			/*开启绝对定位*/
			position: absolute;
			/*设置位置*/
			bottom: 15px;
			/*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
			/*left: 197px;*/
		}

		#navDiv a {
			/*设置超链接浮动*/
			float: left;
			/*设置超链接的宽和高*/
			width: 15px;
			height: 15px;
			/*设置背景颜色*/
			background-color: red;
			/*设置左右外边距*/
			margin: 0 5px;
			/*设置透明*/
			opacity: 0.5;
			/*兼容IE8透明*/
			filter: alpha(opacity=50);
		}

		/*设置鼠标移入的效果*/
		#navDiv a:hover {
			background-color: black;
		}
	</style>

	<!--引用工具-->
	<script type="text/javascript" src="js/tools.js"></script>
	<script type="text/javascript">
		window.onload = function () {
			//获取imgList
			var imgList = document.getElementById("imgList");
			//获取页面中所有的img标签
			var imgArr = document.getElementsByTagName("img");
			//设置imgList的宽度
			imgList.style.width = 520 * imgArr.length + "px";


			/*设置导航按钮居中*/
			//获取navDiv
			var navDiv = document.getElementById("navDiv");
			//获取outer
			var outer = document.getElementById("outer");
			//设置navDiv的left值
			navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

			//默认显示图片的索引
			var index = 0;
			//获取所有的a
			var allA = document.getElementsByTagName("a");
			//设置默认选中的效果
			allA[index].style.backgroundColor = "black";

			/*
				  点击超链接切换到指定的图片
						点击第一个超链接，显示第一个图片
						点击第二个超链接，显示第二个图片
			 * */

			//为所有的超链接都绑定单击响应函数
			for (var i = 0; i < allA.length; i++) {

				//为每一个超链接都添加一个num属性
				allA[i].num = i;

				//为超链接绑定单击响应函数
				allA[i].onclick = function () {

					//关闭自动切换的定时器
					clearInterval(timer);
					//获取点击超链接的索引,并将其设置为index
					index = this.num;

					//切换图片
					/*
					 * 第一张  0 0
					 * 第二张  1 -520
					 * 第三张  2 -1040
					 */
					//imgList.style.left = -520*index + "px";
					//设置选中的a
					setA();

					//使用move函数来切换图片
					move(imgList, "left", -520 * index, 20, function () {
						//动画执行完毕，开启自动切换
						autoChange();
					});

				};
			}


			//开启自动切换图片
			autoChange();


			//创建一个方法用来设置选中的a
			function setA() {

				//判断当前索引是否是最后一张图片
				if (index >= imgArr.length - 1) {
					//则将index设置为0
					index = 0;

					//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
					//通过CSS将最后一张切换成第一张
					imgList.style.left = 0;
				}

				//遍历所有a，并将它们的背景颜色设置为红色
				for (var i = 0; i < allA.length; i++) {
					allA[i].style.backgroundColor = "";
				}

				//将选中的a设置为黑色
				allA[index].style.backgroundColor = "black";
			};

			//定义一个自动切换的定时器的标识
			var timer;
			//创建一个函数，用来开启自动切换图片
			function autoChange() {

				//开启一个定时器，用来定时去切换图片
				timer = setInterval(function () {

					//使索引自增
					index++;

					//判断index的值
					index %= imgArr.length;

					//执行动画，切换图片
					move(imgList, "left", -520 * index, 20, function () {
						//修改导航按钮
						setA();
					});

				}, 3000);

			}


		};

	</script>
</head>

<body>
	<!-- 创建一个外部的div，来作为大的容器 -->
	<div id="outer">
		<!-- 创建一个ul，用于放置图片 -->
		<ul id="imgList">
			<li><img src="img/1.jpg" /></li>
			<li><img src="img/2.jpg" /></li>
			<li><img src="img/3.jpg" /></li>
			<li><img src="img/4.jpg" /></li>
			<li><img src="img/5.jpg" /></li>
			<li><img src="img/1.jpg" /></li>
		</ul>
		<!--创建导航按钮-->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>
</body>

</html>